<!-- quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Sniffing for Box Model (quirks)</title>
	<style type="text/css">
		.box {
			width: 48px;
			padding: 25px;
			background-color: yellow;
			border: 1px solid black;
		}
		.dj_borderbox .box {
			background-color: orange;
			width: 100px;
		}
		.ruler {
			background: url('http://sam-i-am.com/work/sandbox/measuring/ruler.gif') no-repeat;
			height: 60px;
		}
	</style>
	<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script>
	<script type="text/javascript">
		require([
			"doh",
			"dojo/dom", "dojo/dom-geometry", "dojo/dom-style",
			"dojo/json", "dojo/uacss", "dojo/domReady!"
		], function(doh, dom, domGeom, domStyle, json, has){
			var node = dom.byId("box1");
			var reportNode = dom.byId("log");
			var inner = (reportNode.textContent) ? "textContent": "innerText";
			reportNode.innerHTML = json.stringify({
				boxModel: domGeom.boxModel,
				hasQuirks: has("quirks"),
				width: dojo.style(node, "width"),
				marginBoxWidth: domGeom.getMarginBox(node).w,
				htmlClassName: document.documentElement.className
			}, null, "    ");
			doh.register("tests.window.sniffQuirks", [
				function test_boxModel(t) {
					// ensure the box-model correction in the stylesheet have been correctly applied
					// we measure the node - it should be 100px
					t.is(100, node.offsetWidth);
				}
			]);
			doh.run();
		});
	</script>
</head>

<body>
	<h1>CSS Sniff test dj_boxmodel in quirks mode</h1>
	<div style="background-color: orange; float:left">
		<div id="box1" class="box">
			<div style="background-color: white; height: 20px"></div>
		</div>
	</div>
	<div style="clear:both"></div>
	<div class="ruler"></div>
	<div style="border: 1px solid #666; background-color: #dedede"><xmp id="log"></xmp></div>
</body>
</html>
